<template>
  <el-drawer
    size="40%"
    class="custom-drawer"
    :visible.sync="drawer"
    :direction="direction"
    :with-header="false"
  >
    <div class="title"><h3>{{ title }}</h3></div>
    <div class="body">
      <el-form ref="formRef" :model="ruleForm" :rules="rules" label-suffix="：" label-position="top">
        <el-form-item label="名称">
          <el-input v-model="detail.name" />
        </el-form-item>
        <el-form-item label="数据范围" prop="dataScore">
          <el-select v-model="ruleForm.dataScore" placeholder="选择范围">
            <el-option v-for="item in sourceList" :key="item.value" :value="item.value" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="treeShow" label="" prop="icon">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="菜单权限" prop="icon">
                <el-tree
                  ref="permissionTree"
                  :data="permissionList"
                  show-checkbox
                  :default-expanded-keys="ruleForm.resourceIds"
                  :default-checked-keys="ruleForm.resourceIds"
                  node-key="id"
                  :props="defaultProps"
                />
              </el-form-item>

            </el-col>
            <el-col :span="12">
              <el-form-item v-show="showDeptInput" label="数据权限" prop="icon">
                <el-tree
                  ref="deptTree"
                  :data="deptList"
                  :default-expanded-keys="ruleForm.deptIdList"
                  :default-checked-keys="ruleForm.deptIdList"
                  show-checkbox
                  node-key="id"
                  :props="defaultProps2"
                />
              </el-form-item>

            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div class="f-r a-c j-e" style="margin: 10px 0;">
        <el-button type="primary" @click="onSave">保存</el-button>
        <el-button>取消</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { http_permission, http_role, http_dept } from '@/api'
import { dict_dataSource } from '@/dict'

export default {
  name: 'EditForm',
  props: {
    title: String
  },
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      permissionList: [],
      deptList: [],
      sourceList: [
      ],
      ruleForm: {
        resourceIds: [],
        dataScore: '',
        deptIdList: []
      },
      rules: {
        name: [{ required: true, message: '不能为空' }],
        parentId: [{ required: true, message: '不能为空' }]
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      defaultProps2: {
        children: 'children',
        label: 'deptName'
      },
      treeShow: false,
      detail: {}
    }
  },
  computed: {
    showDeptInput() {
      return this.ruleForm.dataScore == 4
    }
  },
  created() {
    for (const dictDataSourceKey in dict_dataSource) {
      this.sourceList.push({
        value: parseInt(dictDataSourceKey),
        name: dict_dataSource[dictDataSourceKey]
      })
    }
  },
  methods: {
    open(detail) {
      this.detail = detail
      this.drawer = true
      http_role.read(this.detail.id).then(res => {
        this.ruleForm.dataScore = res.dataScore
        this.ruleForm.deptIdList = res.deptIdList || []
        this.ruleForm.resourceIds = res.resourceIdList
        this.treeShow = true
      })
      http_permission.tree().then(res => {
        this.permissionList = res
      })
      http_dept.tree().then(res => {
        this.deptList = res
      })
    },
    onSave() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.ruleForm.resourceIds = this.$refs.permissionTree.getCheckedKeys()
          this.ruleForm.deptIdList = this.$refs.deptTree.getCheckedKeys()
          http_role.relResource({ id: this.detail.id }, {
            ...this.ruleForm
          }).then(res => {
            this.drawer = false
            this.$emit('save')
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.upload-demo2 {
  .el-upload,
  .el-upload-dragger{
    width: 100%;
  }
}
</style>
